<template>
    <div :ref="drop" class="container bg-white h-full border-x p-4" :class="backgroundColor">
        <component @click.stop="selectComponent(json.id)" :class="{ 'drag-area': json.selected }"
            v-for="json in formJson" :key="json.id" :is="components.get(json.type)" v-bind="json">
        </component>
    </div>
</template>
<script setup>
import { ref, watch, computed, unref } from 'vue';
import { useDrop } from 'vue3-dnd'
import { toRefs } from '@vueuse/core'

import components from './index.js'
import { useFormJsonStore } from '../stores/form-json.js'
const formJsonStore = useFormJsonStore()
const formJson = formJsonStore.getFormJson()
console.log(formJson)
const selectComponent = (id) => {
    formJsonStore.setCurrentFormJson(id)
}

const [collect, drop] = useDrop(() => ({
    accept: ['XInput', 'XSelect'],
    drop(_item, monitor) {
        const didDrop = monitor.didDrop()
        if (didDrop) {
            return
        }
    },
    hover: (item, monitor) => {
        console.log(item, monitor)
        monitor.isOver({ shallow: true })
    },
    collect: (monitor) => ({
        isOver: monitor.isOver({ shallow: true }),
        canDrop: monitor.canDrop(),
    }),
}))

const { canDrop, isOver } = toRefs(collect)
const isActive = computed(() => unref(canDrop) && unref(isOver))
const backgroundColor = computed(() =>
    unref(isActive) ? 'bg-gray-200' : unref(canDrop) ? 'bg-gray-200' : 'bg-white'
)


</script>